<template>
  <el-row :gutter="6">
    <el-col :span="24" class="col-flex">
      <el-col class="breadcrumb-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/main' }">信息管理</el-breadcrumb-item>
          <el-breadcrumb-item>组织架构</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col class="maincont-container">
        <div id="tableview" v-if="tableshow">
          <my-tableX
            v-loading="listloading"
            element-loading-text="正在删除......"
            element-loading-spinner="el-icon-loading"
            tableHeight="340px"
            @dataDownload="downloadFile"
            @dataOutput="outputData"
            @dataEdit="editData"
            @dataDelete="deleteData"
            @dataAdd="addNewProject"
            :tableData="bondsAllList"
            :configs="configs"
          ></my-tableX>
        </div>
        <div
          class="data-form"
          v-if="!tableshow"
          v-loading="loading"
          element-loading-text="正在提交......"
          element-loading-spinner="el-icon-loading"
        >
          <div>
            <h5>{{operationType}}</h5>
          </div>
          <el-form
            size="small"
            :model="ruleForm"
            :rules="rules"
            style
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="单位类别" prop="company_type">
              <el-select
                v-model="ruleForm.company_type"
                @change="changeSelect"
                placeholder="请选择单位类型"
              >
                <el-option
                  :label="itm.roleName"
                  :value="itm.roleName"
                  :key="itm.id"
                  v-for="itm in companytypes"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单位名称" prop="company_name">
              <el-input v-model="ruleForm.company_name"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="岗位" prop="post">
              <el-input v-model="ruleForm.post"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item style="text-align:right">
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import myTableX from "../../../../components/base/tableX";

var user;

export default {
  components: { myTableX },
  inject: ["reload"],
  data() {
    return {
      operationType: "",
      loading: false,
      listloading: false,
      bondsAllList: [],
      tableshow: true,
      isupdate: false,
      fileList: [],
      configs: {
        columns: [
          { field: "company_type", name: "单位类别", canSort: true },
          { field: "company_name", name: "单位名称", canSort: true },
          { field: "name", name: "姓名", canSort: true },
          { field: "post", name: "岗位", canSort: true },
          { field: "phone", name: "联系方式" },
          { field: "email", name: "邮箱" }
        ],
        operationCol: {
          show: true,
          edit: true,
          delete: true,
          download: false
        },
        showFilterRow: {
          show: true
        },
        operationBtn: {
          show: true,
          add: true,
          output: false
        }
      },
      ruleForm: {
        company_name: "",
        company_type: "",
        name: "",
        post: "",
        phone: "",
        email: ""
      },
      rules: {
        company_type: [
          { required: true, message: "请选择单位类型", trigger: "change" }
        ],
        company_name: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" }
        ],
        post: [
          { required: true, message: "请输入职位", trigger: "blur" },
          { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          { min: 3, max: 11, message: "长度在 3 到 11 个字符", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入电子邮箱", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" }
        ]
      }
    };
  },

  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.tableshow = true;
      this.isupdate = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm("提交后不可更改，是否继续？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.loading = true;
              if (this.isupdate) {
                this.$api.organization
                  .modify(this.ruleForm)
                  .then(res => {
                    if (res.code == 200) {
                      this.$message.success("修改成功!");
                      this.tableshow = !this.tableshow;
                      this.reload();
                    }
                    this.loading = false;
                  })
                  .catch(err => {
                    this.loading = false;
                    this.$message.error("修改失败!!" + err);
                  });
              } else {
                this.$api.organization
                  .add(this.ruleForm)
                  .then(res => {
                    if (res.code == 200) {
                      this.$message.success("添加成功!");
                      this.tableshow = !this.tableshow;
                      this.reload();
                    }
                    this.loading = false;
                  })
                  .catch(err => {
                    this.loading = false;
                    this.$message.error("添加失败!!" + err);
                  });
              }
            })
            .catch(() => {
              return;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addNewProject() {
      this.tableshow = !this.tableshow;
      this.isupdate = false;
      this.operationType = "新增组织架构";
      this.ruleForm.create_by = this.$store.state.m_user.userInfo.user_name;
      this.ruleForm.create_time = this.getNowFormatDate();
      this.ruleForm.subject_id = this.$store.state.projectInfo.projectName;
    },

    editData(row) {
      console.log(row);
      this.operationType = "编辑组织架构";
      this.isupdate = true;
      this.tableshow = !this.tableshow;
      this.ruleForm = row;
      this.ruleForm.update_by = this.$store.state.m_user.userInfo.user_name;
      this.ruleForm.update_time = this.getNowFormatDate();
    },

    deleteData(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该公告, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.listloading = true;
          this.$api.organization
            .delete({ reqMap: row.id })
            .then(res => {
              if (res.code == 200) {
                this.listloading = false;
                this.$message.success("操作成功!");
                this.reload();
              } else {
                this.listloading = false;
                this.$message.success("删除失败:" + res.msg);
              }
            })
            .catch(err => {
              this.$message.success("操作失败!" + err);
            });
        })
        .catch(err => {});
    },

    outputData() {
      this.$message("触发导出事件");
    },

    downloadFile(data) {
      console.log(data);
      this.$message("触发下载事件");
    },

    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },

    changeSelect(value) {
      console.log("select:" + value);
      console.log(this.ruleForm.company_type);
      if (user.user_type === "0") {
        let index = this.companytypes.indexOf(value);
      } else {
        this.ruleForm.company_name = user.company;
      }
    }
  },

  created() {
    user = this.$store.state.m_user.userInfo;

    this.$api.organization
      .getlist({ subject_id: this.$store.state.projectInfo.projectName })
      .then(result => {
        if (result.code == 200) {
          this.bondsAllList = result.data;
          console.log(this.bondsAllList);
        }
      })
      .catch(err => {
        console.log(err);
        this.$message.error(err);
      });
  },

  computed: {
    activeIndex: function() {
      return this.$store.state.m_menu.menuState.firstLevel;
    },
    companytypes() {
      if (user.user_type === "0") {
        return this.$store.state.m_user.roles;
      } else {
        return [{ roleName: user.nick_name, id: user.id }];
      }
    }
  }
};
</script>

<style lang="less" scoped>
.col-flex {
  padding-top: 30px;
  height: 100%;
  box-sizing: border-box;
  .breadcrumb-container {
    height: 30px;
    margin-top: -20px;
  }
  .maincont-container {
    height: calc(~"100% - 10px");
    margin-top: 3px;

    #tableview {
      height: 100%;
    }
    .data-form {
      padding: 0px 150px;
      .el-select {
        display: block;
      }
      .upload-demo {
        text-align: left;
      }
    }
  }
}
</style>